<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:fragment=header(title)>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel='stylesheet' th:href='@{/webjars/bootstrap/5.3.2/css/bootstrap.min.css}'>
	<title th:text="${title}"></title>
</head>



<div th:fragment="top">
	<nav class="py-2 bg-body-tertiary border-bottom">
		<div class="container d-flex flex-wrap">
			<ul class="nav me-auto">
				<li class="nav-item"><a href="#" th:href="@{'/'}" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li>
<!--				<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>-->
<!--				<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>-->
<!--				<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>-->
				<li class="nav-item"><a href="#" th:href="@{'/about'}" class="nav-link link-body-emphasis px-2">About</a></li>
			</ul>
			<ul class="nav">

<!--			<span id="authorized" style="display:NONE;">-->
<!--                <span id="userName"></span>-->
<!--                <a href="javascript:void(0);" id="logout">退出</a>-->
<!--            </span>-->
<!--			<span id="unauthorized" style="display:NONE;">-->
<!--					<li class="nav-item"><a href="#" th:href="@{'/login'}" class="nav-link link-body-emphasis px-2">Login</a></li>-->
<!--            </span>-->

				<span th:if="${user}">
					<span th:text="${user.userName}"></span>
					<a href="javascript:void(0);" id="logout">退出</a>
				</span>
				<span th:unless="${user}">
					<li class="nav-item"><a href="#" th:href="@{'/login'}" class="nav-link link-body-emphasis px-2">Login</a></li>
				</span>


<!--				<li class="nav-item"><a href="#" th:href="@{'/login'}" class="nav-link link-body-emphasis px-2">Login</a></li>-->
<!--				<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>-->
			</ul>
		</div>
	</nav>
<!--	<header class="py-3 mb-4 border-bottom">-->
<!--		<div class="container d-flex flex-wrap justify-content-center">-->
<!--			<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">-->
<!--				<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>-->
<!--				<span class="fs-4">Double header</span>-->
<!--			</a>-->
<!--			<form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">-->
<!--				<input type="search" class="form-control" placeholder="Search..." aria-label="Search">-->
<!--			</form>-->
<!--		</div>-->
<!--	</header>-->
</div>


<div th:fragment="js">
	<script th:src="@{/webjars/jquery/3.7.1/jquery.min.js}"></script>
	<script th:src="@{/webjars/bootstrap/5.3.2/js/bootstrap.min.js}"></script>
	<script th:src="@{/webjars/js-cookie/3.0.5/dist/js.cookie.min.js}"></script>
	<script th:src="@{/webjars/js-md5/0.7.3/build/md5.min.js}"></script>





<script th:inline="javascript">


const parseJwt = (token) => {
  try {
    return JSON.parse(atob(token.split('.')[1]));
  } catch (e) {
    return null;
  }
};
var auth=Cookies.get("Authorization");


$(document).ready(function () {


//    if (undefined==auth) {
//		$("#unauthorized").show();
//		$("#authorized").hide();
//    } else {
//            const payload =parseJwt(auth);
//            console.log(payload);
//			$("#userName").html(payload.sub);
//			$("#authorized").show();
//			$("#unauthorized").hide();
//    }


    $("#logout").on("click", function() {
            $.ajax({
            type: 'GET',
            url: '/logout',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                if (data.code == 200) {
                    Cookies.remove("Authorization", { path: '/' }) // removed!
                    location.href = "/";
                } else {
                    alert(data.msg);
                }
            }
        });


    });


});
</script>

</div>



